<template>
  <q-page padding>
    <div class="items-center row q-gutter-md" style="margin-bottom: 10px">
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.sql_code"
        :label="$t('Sql') + $t('Code')"
      />
      <q-select
        outlined
        dense
        emit-value
        clearable
        map-options
        style="width: 15%"
        v-model="queryParams.sql_type"
        :label="$t('Sql') + $t('Type')"
        :options="dictOptions.sqlType"
      />
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.schema_name"
        :label="$t('Schema') + $t('Name')"
      />
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.table_name"
        :label="$t('Table') + $t('Name')"
      />
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.created_by"
        :label="$t('CreatedBy')"
      />
      <q-input
        outlined
        dense
        style="width: 15%"
        v-model="queryParams.updated_by"
        :label="$t('UpdatedBy')"
      />

      <q-input
        outlined
        dense
        style="width: 25%"
        v-model="queryParams.sql_string"
        :label="$t('Sql') + $t('Statement')"
      />
      <q-input
        outlined
        dense
        style="width: 25%"
        v-model="queryParams.memo"
        :label="$t('Memo')"
      />
      <q-btn color="primary" @click="handleSearch" :label="$t('Search')" />
      <q-btn color="primary" @click="resetSearch" :label="$t('Reset')" />
    </div>
    <q-space />
    <q-table
      dense
      row-key="id"
      separator="cell"
      wrap-cells
      :rows="tableData"
      :columns="columns"
      v-model:pagination="pagination"
      :rows-per-page-options="pageOptions"
      :loading="loading"
      @request="onRequest"
    >
      <template v-slot:top>
        <q-btn
          color="primary"
          @click="showAddForm()"
          :label="$t('Add') + ' ' + $t('Sql')"
        />
      </template>
      <template v-slot:body-cell-created_at="props">
        <q-td :props="props">
          {{ showDateTime(props.row.created_at) }}
        </q-td>
      </template>
      <template v-slot:body-cell-updated_at="props">
        <q-td :props="props">
          {{ showDateTime(props.row.updated_at) }}
        </q-td>
      </template>
      <template v-slot:body-cell-sql_string="props">
        <q-td :props="props">
          {{
            props.row.sql_string.length > 50
              ? props.row.sql_string.substring(0, 50) + "..."
              : props.row.sql_string
          }}
        </q-td>
      </template>
      <template v-slot:body-cell-sql_type="props">
        <q-td :props="props">
          <DcDictCell dictName="sqlType" :dictCode="props.row.sql_type" />
        </q-td>
      </template>
      <template v-slot:body-cell-has_day_id="props">
        <q-td :props="props">
          <DcDictCell dictName="statusYesNo" :dictCode="props.row.has_day_id" />
        </q-td>
      </template>
      <template v-slot:body-cell-actions="props">
        <q-td :props="props">
          <div class="q-gutter-xs">
            <q-btn
              color="primary"
              size="sm"
              @click="showEditForm(props.row)"
              :label="$t('Edit')"
            />
            <!-- <q-btn
              color="secondary"
              size="sm"
              @click="showSqlSqlparamDialog(props.row)"
              :label="$t('Relate') + $t('Sqlparam')"
            /> -->
            <q-btn
              color="negative"
              size="sm"
              @click="handleDelete(props.row)"
              :label="$t('Delete')"
            />
          </div>
        </q-td>
      </template>
      <template v-slot:loading>
        <q-inner-loading :showing="loading">
          <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading> </template
    ></q-table>
    <SqlRecordDetail ref="recordDetailDialog" @handleFinish="handleFinish" />
    <SqlSqlparamDialog ref="sqlSqlparamDialog" @handleFinish="handleFinish" />
  </q-page>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { computed, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import SqlRecordDetail from "./SqlRecordDetail.vue";
import { FormatDateTime } from "src/utils/date";
import SqlSqlparamDialog from "./SqlSqlparamDialog.vue";
import { useQuasar } from "quasar";

const $q = useQuasar();
const { t } = useI18n();
const url = {
  list: "sql/get-sql-list",
  delete: "sql/delete-sql-by-id",
};

const columns = computed(() => {
  return [
    {
      name: "sort",
      align: "center",
      label: t("Sort"),
      field: "sort",
    },
    {
      name: "sql_code",
      align: "center",
      label: t("Sql") + t("Code"),
      field: "sql_code",
    },
    {
      name: "sql_type",
      align: "center",
      label: t("Sql") + t("Type"),
      field: "sql_type",
    },
    {
      name: "schema_name",
      align: "center",
      label: t("Schema") + t("Name"),
      field: "schema_name",
    },
    {
      name: "table_name",
      align: "center",
      label: t("Table") + t("Name"),
      field: "table_name",
    },
    {
      name: "has_day_id",
      align: "center",
      label: "是否包含day_id",
      field: "has_day_id",
    },
    {
      name: "sql_string",
      align: "center",
      label: t("Sql") + t("Statement"),
      field: "sql_string",
      style: "max-width:300px",
    },
    {
      name: "created_by",
      align: "center",
      label: t("CreatedBy"),
      field: "created_by",
    },
    {
      name: "created_at",
      align: "center",
      label: t("CreatedAt"),
      field: "created_at",
    },
    {
      name: "updated_by",
      align: "center",
      label: t("UpdatedBy"),
      field: "updated_by",
    },
    {
      name: "updated_at",
      align: "center",
      label: t("UpdatedAt"),
      field: "updated_at",
    },
    {
      name: "memo",
      align: "center",
      label: t("Memo"),
      field: "memo",
    },
    {
      name: "actions",
      align: "center",
      label: t("Actions"),
      field: "actions",
    },
  ];
});

const {
  DcDictCell,
  pagination,
  queryParams,
  pageOptions,
  loading,
  tableData,
  recordDetailDialog,
  onRequest,
  getTableData,
  dictOptions,
  handleSearch,
  resetSearch,
  showAddForm,
  showEditForm,
  handleFinish,
  handleDelete,
} = useTableData(url, true);

onMounted(() => {
  getTableData();
});

const showDateTime = computed(() => {
  return (datetime) => {
    return FormatDateTime(datetime);
  };
});

const sqlSqlparamDialog = ref(null);
const showSqlSqlparamDialog = (row) => {
  console.log(row);
  if (row.sql_type !== "query") {
    sqlSqlparamDialog.value.show(row);
  } else {
    $q.notify({
      color: "negative",
      icon: "report_problem",
      message: "查询语句类型的sql请直接在语句定义中关联SQL参数！",
    });
  }
};
</script>

<style lang="scss" scoped></style>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "SqlComp",
});
</script>
